<template>
  <div class="zhzx-right-top d-flex-c p-b-tiny overflow-hidden">
    <div class="panel-header-bg flex-between flex-0">
      <div class="title-text">
        水情信息
      </div>
      <span class="c-text-blue f-12">今日以来</span>
    </div>
    <div class="panel-zone-big-bg right-top d-flex-c flex-1 overflow-y-auto overflow-x-hidden">
      <div
        class="flex-between m-b-mini flex-top-height"
      >
        <ReservoirOverview class="flex-0 full-height m-r-mini reservoir-storage" />
        <ChannelVariation class="flex-1 full-height" />
      </div>
      <div
        class="flex-between double-chart-box"
      >
        <div class="panel-zone-bg flex-1 full-height m-r-mini no-bottom-padding">
          <div class="little-title flex-0">
            河道超警
          </div>
          <div class="flex-1 d-flex-c ai-c position-relative ">
            <ChartLegend
              class="m-v-mini"
              :legends="overloadAlarmLegends"
              :value-data="overloadAlarmData"
              :is-vertical="false"
              @valueClick="field=>handleOverloadAlarmReverse(field,'overloadAlarm')"
            />
            <div class="flex-1 position-relative full-width ">
              <BKChart
                ref="alarmChart"
                autoresize
                :option="overloadAlarmOptions"
              />
            </div>
          </div>
        </div>
        <div class="panel-zone-bg flex-1 full-height  d-flex-c no-bottom-padding position-relative">
          <div class="little-title flex-0">
            水库超汛限
          </div>
          <div class="flex-1 d-flex-c ai-c position-relative ">
            <ChartLegend
              class="m-v-mini"
              :legends="reservoirLegends"
              :value-data="reservoirData"
              :is-vertical="false"
              @valueClick="field=>handleOverloadAlarmReverse(field,'reservoir')"
            />
            <div class="flex-1 position-relative full-width ">
              <BKChart
                autoresize
                :option="reservoirOptions"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <DetailModal
      v-if="detailVisible"
      :visible="detailVisible"
      :columns="columns"
      :static-data="detailData"
      @close="detailVisible=false"
      width="1236px"
    />
  </div>
</template>

<script>
// import { chartFontSizeFunc } from '@/components/chart/echart-utils'
import ChartLegend from '../../components/chart-legend.vue'
import ReservoirOverview from '@/views/business/ysqjcdp/components/business/reservoir-overview.vue'
import ChannelVariation from '@/views/business/ysqjcdp/components/business/channel-variation.vue'
import DetailModal from '@/views/business/ysqjcdp/components/modal/detail-modal.vue'
export default {
  name: 'ZhzxRightTop',
  components: { ChartLegend, ChannelVariation, ReservoirOverview, DetailModal },
  data () {
    this.overloadAlarmLegends = [
      {
        name: '超警戒',
        field: 'cjj',
        listField: 'alerStations',
        iconType: 'rect',
        color: '#07FFDE',
        bgColor: 'rgba(7,255,222,0.5)',
        unit: '个'
      },
      {
        name: '超保证',
        field: 'cbz',
        listField: 'promiseStations',
        iconType: 'rect',
        color: '#0382fc',
        bgColor: 'rgba(3,130,252,0.5)',
        unit: '个'
      },
      {
        name: '超历史',
        field: 'cls',
        listField: 'historyStations',
        iconType: 'rect',
        color: '#FFB948',
        bgColor: 'rgba(255,185,72,0.5)',
        unit: '个'
      }
    ]
    this.overloadAlarmColumns = [
      { title: '站码', field: 'stcd', width: 80 },
      { title: '测站名称', field: 'stnm', width: 100 },
      { title: '当前水位', field: 'z', width: 80 },
      { title: '警戒水位', field: 'wrz', width: 80 },
      { title: '保证水位', field: 'grz', width: 80 },
      { title: '历史最高水位', field: 'obhtz', width: 130 },
      { title: '站址', field: 'stlc', minWidth: 100 },
      // { title: '测站岸别', field: 'stbk', width: 100 },
      { title: '站类', field: 'sttp', width: 80 },
      { title: '所属行政区名', field: 'addvnm', width: 120 },
      { title: '经度', field: 'lgtd', width: 100 },
      { title: '纬度', field: 'lttd', width: 100 }
    ]
    this.reservoirLegends = [
      {
        name: '超汛限',
        iconType: 'rect',
        field: 'cxx',
        listField: 'flootStations',
        color: '#FF5100',
        bgColor: 'rgba(255,81,1,0.5)',
        unit: '个'
      },
      {
        name: '超校核',
        iconType: 'rect',
        field: 'cjh',
        listField: 'checkStations',
        color: '#EFE942',
        bgColor: 'rgba(239,233,66,0.5)',
        unit: '个'
      }, {
        name: '超历史',
        iconType: 'rect',
        field: 'cls',
        listField: 'historyStations',
        color: '#FFC349',
        bgColor: 'rgba(255,195,73,0.5)',
        unit: '个'
      }
    ]
    this.reservoirColumns = [
      { title: '站码', field: 'stcd', width: 80 },
      { title: '测站名称', field: 'stnm', width: 120 },
      { title: '站址', field: 'stlc', width: 120 },
      { title: '站类', field: 'sttp', width: 120 },
      { title: '当前水位', field: 'rz', width: 120 },
      { title: '校核水位', field: 'ckflz', width: 120 },
      { title: '设计水位', field: 'dsflz', width: 120 },
      { title: '汛限水位', field: 'fsltdz', width: 130 },
      { title: '历史水位 ', field: 'obhtz', width: 120 },
      { title: '所属行政区名', field: 'addvnm', width: 130 },
      { title: '隶属行业单位 ', field: 'admauth', width: 130 },
      { title: '经度', field: 'lgtd', minWidth: 80 },
      { title: '纬度', field: 'lttd', width: 80 }
    ]
    return {
      overloadAlarmOptions: null, // 河道超警
      overloadAlarmAllData: {},
      overloadAlarmData: {},
      reservoirOptions: null, // 水库超汛限
      reservoirAllData: {},
      reservoirData: {},
      detailVisible: false,
      columns: [],
      detailData: []
    }
  },
  mounted () {
    this.setOverloadAlarmOptions()
    this.setReservoirOptions()
  },
  methods: {
    async setOverloadAlarmOptions () {
      const btime = this.$utils.createDate().format('YYYY-MM-DD')
      const etime = this.$utils.createDate().format('YYYY-MM-DD HH:mm:ss')
      let data = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectRiverOverloadAlarm', {
        btime: btime + ' 08:00:00',
        etime: etime
      })
      let cjj = 0
      let cbz = 0
      let cls = 0

      this.overloadAlarmAllData = data.reduce((pre, cur) => {
        if (!isNaN(Number(cur.alerCount))) {
          cjj = cjj + Number(cur.alerCount)
        }
        if (!isNaN(Number(cur.promiseCount))) {
          cbz = cbz + Number(cur.promiseCount)
        }
        if (!isNaN(Number(cur.historyCount))) {
          cls = cls + Number(cur.historyCount)
        }
        if (cur.alerStations?.length) {
          pre.alerStations.push(...cur.alerStations)
        }
        if (cur.checkStations?.length) {
          pre.checkStations.push(...cur.checkStations)
        }
        if (cur.historyStations?.length) {
          pre.historyStations.push(...cur.historyStations)
        }
        return pre
      }, {
        alerStations: [],
        checkStations: [],
        historyStations: []
      })

      data = data.map(item => {
        return {
          ...item,
          xzqmc: item.name,
          cjj: item.promiseCount,
          cbz: item.alerCount,
          cls: item.historyCount
        }
      })
      this.overloadAlarmData = {
        cjj: cjj,
        cbz: cbz,
        cls: cls
      }
      const indicatorMax = Math.max(cjj, cbz, cls) ? Math.max(cjj, cbz, cls) : 10
      const result = this.getRadarOptions({
        indicator: data.map(item => {
          return {
            name: item.xzqmc.replace('市', ''),
            min: 0,
            max: indicatorMax,
            color: '#fff'
          }
        }),
        series: this.overloadAlarmLegends.map(item => {
          return {
            ...item,
            radarIndex: 0,
            data: data.map(j => j[item.field])
          }
        }),
        toolitpTrigger: 'axis'
      })
      result.series.push({
        name: 'tootip',
        type: 'radar',
        symbol: 'none', // 隐藏雷达图点的颜色
        lineStyle: { // 隐藏雷达图线的颜色
          color: 'transparent'
        },
        radarIndex: 1,
        zlevel: 9,
        tooltip: {
          show: true,
          formatter: (params) => {
            const { data, name } = params.data
            const dataHtml = this.overloadAlarmLegends.reduce((pre, cur) => {
              const marker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${cur.color};"></span>`
              const name = `<span style="display:inline-block;margin-right:10px;">${cur.name}</span>`
              const value = `<span style="display:inline-block;font-weight:bold">${data[cur.field]}</span>`
              return pre + marker + name + value + '个' + '<br />'
            }, '')
            return `${name}<br />` + dataHtml
          }
        },
        data: data.map((item, index) => {
          const value = new Array(data.length).fill(0)
          value[index] = indicatorMax // 触发值的变量
          return {
            name: item.xzqmc,
            value: value,
            data: item
          }
        })
      })
      // console.log('setOverloadAlarmOptions', { result })
      this.overloadAlarmOptions = result
    },
    async setReservoirOptions () {
      const btime = this.$utils.createDate().format('YYYY-MM-DD')
      const etime = this.$utils.createDate().format('YYYY-MM-DD HH:mm:ss')
      let data = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectReservoirOverloadAlarm',
        {
          btime: btime + ' 08:00:00',
          etime: etime
        })
      let cxx = 0
      let cjh = 0
      let cls = 0
      this.reservoirAllData = data.reduce((pre, cur) => {
        if (!isNaN(Number(cur.flootCount))) {
          cxx = cxx + Number(cur.flootCount)
        }
        if (!isNaN(Number(cur.checkCount))) {
          cjh = cjh + Number(cur.checkCount)
        }
        if (!isNaN(Number(cur.historyCount))) {
          cls = cls + Number(cur.historyCount)
        }
        if (cur.flootStations?.length) {
          pre.flootStations.push(...cur.flootStations)
        }
        if (cur.checkStations?.length) {
          pre.checkStations.push(...cur.checkStations)
        }
        if (cur.historyStations?.length) {
          pre.historyStations.push(...cur.historyStations)
        }
        return pre
      }, {
        alerStations: [],
        checkStations: [],
        historyStations: []
      })
      data = data.map(item => {
        return {
          ...item,
          xzqmc: item.name,
          cxx: item.flootCount,
          cjh: item.checkCount,
          cls: item.historyCount
        }
      })
      this.reservoirData = {
        cxx: cxx,
        cjh: cjh,
        cls: cls
      }
      const indicatorMax = Math.max(cxx, cjh, cls) ? Math.max(cxx, cjh, cls) : 10
      const result = this.getRadarOptions({
        indicator: data.map(item => {
          return {
            name: item.xzqmc.replace('市', ''),
            min: 0,
            max: indicatorMax,
            color: '#fff'
          }
        }),
        series: this.reservoirLegends.map(item => {
          return {
            ...item,
            data: data.map(j => j[item.field]),
            radarIndex: 0

          }
        }),
        toolitpTrigger: 'axis'

      })
      result.series.push({
        name: 'tootip',
        type: 'radar',
        symbol: 'none', // 隐藏雷达图点的颜色
        lineStyle: { // 隐藏雷达图线的颜色
          color: 'transparent'
        },
        radarIndex: 1,
        zlevel: 9,
        tooltip: {
          show: true,
          formatter: (params) => {
            const { data, name } = params.data
            const dataHtml = this.reservoirLegends.reduce((pre, cur) => {
              const marker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${cur.color};"></span>`
              const name = `<span style="display:inline-block;margin-right:10px;">${cur.name}</span>`
              const value = `<span style="display:inline-block;font-weight:bold">${data[cur.field]}</span>`
              return pre + marker + name + value + '个' + '<br />'
            }, '')
            return `${name}<br />` + dataHtml
          }
        },
        data: data.map((item, index) => {
          const value = new Array(data.length).fill(0)
          value[index] = indicatorMax // 触发值的变量
          return {
            name: item.xzqmc,
            value: value,
            data: item
          }
        })
      })
      this.reservoirOptions = result
    },
    getRadarOptions ({
      series = [],
      indicator = [],
      toolitpTrigger = 'item'
    }) {
      const _series = []
      for (const s of series) {
        _series.push({
          ...s,
          name: s.name,
          type: 'radar',
          symbol: 'circle',
          symbolSize: 3,
          itemStyle: {
            color: s.bgColor ? s.bgColor : s.color,
            borderColor: s.color,
            borderWidth: 1
          },
          areaStyle: {
            color: s.bgColor ? s.bgColor : s.color
          },
          lineStyle: {
            type: 'dashed',
            color: s.color,
            width: 2
          },
          data: [{
            value: s.data,
            name: s.name
          }],
          tooltip: {
            show: toolitpTrigger === 'item',
            appendToBody: true
          }
        })
      }
      const radar = {
        center: ['50%', '50%'],
        radius: '60%',
        startAngle: 90,
        splitNumber: 4,
        shape: 'circle',
        // triggerEvent: toolitpTrigger === 'axis',
        splitArea: {
          areaStyle: {
            color: ['transparent']
          }
        },
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(233,237,240,0.1)'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(233,237,240,0.1)'
          }
        },
        indicator: indicator
        // .map(item => {
        //   return {
        //     ...item
        //     // textStyle: item.textStyle ? item.textStyle : {
        //     //   fontSize: chartFontSizeFunc(12)
        //     // }
        //   })

      }
      const option = {
        series: _series,
        radar,
        tooltip: {
          show: true,
          trigger: 'item',
          appendToBody: true
        }
      }
      if (toolitpTrigger === 'axis') {
        option.radar = [radar, {
          indicator,
          center: radar.center,
          radius: radar.radius,
          startAngle: radar.startAngle,
          splitArea: {
            areaStyle: {
              color: ['transparent']
            }
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'transparent'
            }
          }
        }]
      }
      return option
    },
    handleOverloadAlarmReverse (legend, type) {
      this.columns = type === 'overloadAlarm' ? this.overloadAlarmColumns : this.reservoirColumns
      this.detailData = type === 'overloadAlarm' ? this.overloadAlarmAllData[legend.listField] : this.reservoirAllData[legend.listField]
      this.detailVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.zhzx-right-top {
  flex-grow: 2;
  flex-shrink: 2;
}

.flex-top-height {
  min-height: 188px;
  flex-grow: 1;
  flex-shrink: 1;
  // max-height: 237px;
  // flex-grow: 2; /* 增加放大优先级 */
  // flex-shrink: 3;
}

.double-chart-box {
  flex-grow: 2; /* 增加放大优先级 */
  flex-shrink: 3;
  min-height: 226px;
  max-height: 300px;
}

.reservoir-storage {
  width: 232px;
}

// .overload-alarm-legend {
// position: absolute;
// right: 15px;
// top: 8px;
// left: 50%;
// transform: translateX(-50%);
// width: 100%;
// justify-content: center;
// }
// .reservoir-legend {
//   position: absolute;
//   right: 29px;
//   top: 8px;
// }
.chart-Legend {
  // height: 60px;
  // margin: 8px 0 2px;
  position: absolute;
  right: 0;
  top: 0;
  // transform: translateY(-50%);
}

.no-bottom-padding {
  padding-bottom: 0 !important;
}
</style>
